<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">折叠</h5>
				<p>Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。</p>
			</div>
			<div class="card-body">
				<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
				<div id="demo" class="collapse">
					Lorem ipsum dolor text....
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">手风琴</h5>
			</div>
			<div class="card-body">
				<div id="accordion">
					<div class="card">
						<div class="card-header">
							<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
								Collapsible Group Item #1
							</a>
						</div>
						<div id="collapseOne" class="collapse show">
							<div class="card-block">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
								Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="card">
						<div class="card-header">
							<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
								Collapsible Group Item #2
							</a>
						</div>
						<div id="collapseTwo" class="collapse">
							<div class="card-block">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
								Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="card">
						<div class="card-header">
							<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
								Collapsible Group Item #3
							</a>
						</div>
						<div id="collapseThree" class="collapse">
							<div class="card-block">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
								Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>

</html>